<template>
  <div class="airPort">
    <!-- 卡片 -->
    <el-form :model="thequery" ref="thequery" size="mini" style="margin:0 0 20px 10px">
      <div style="display: flex;">
        <el-form-item label="城市名称" style="display: flex; margin: 0 20px 0 0">
          <el-input v-model="thequery.airportCityName"></el-input>
        </el-form-item>
        <el-form-item label="城市代码" style="display: flex; margin: 0 20px 0 0">
          <el-input v-model="thequery.airportCityId"></el-input>
        </el-form-item>
        <el-form-item label="机场名称" style="display: flex; margin: 0 20px 0 0">
          <el-input v-model="thequery.airportName"></el-input>
        </el-form-item>
        <el-form-item label="机场代码" style="display: flex; margin: 0 20px 0 0">
          <el-input v-model="thequery.airportId"></el-input>
        </el-form-item>
      </div>
      <div style="display:flex;margin:15px 0 0 0">
        <el-form-item label="启用时间" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker v-model.trim="thequery.startTime" :value-format="format" size="mini" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划终止时间" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker v-model.trim="thequery.endTime" :value-format="format" size="mini" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </div>
      <div style="display: flex;margin:10px 0 0 75%">
        <el-form-item style="margin: 0 20px 0 50px">
          <el-button type="primary" size="mini" @click="searchairPort">查询</el-button>
          <el-button type="primary" size="mini" @click="newairPort">新增</el-button>
          <el-button type="primary" size="mini" @click="resetairPort">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 用户列表区 -->
    <el-table :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" :data="auxiliary" size="mini" border stripe>
      <el-table-column label="机场名称" prop="airportName" width="80"></el-table-column>
      <el-table-column label="机场代码" prop="airportId" width="50"></el-table-column>
      <el-table-column width="50" label="英文名称" prop="airportEname"></el-table-column>
      <el-table-column label="城市名称" width="80" prop="airportCityName"></el-table-column>
      <el-table-column label="城市拼音" width="100" prop="airportCityPinyin"></el-table-column>
      <!-- <el-table-column
        label="城市简称"
        width="80"
        prop="airportCityJpinyin"
      ></el-table-column> -->
      <el-table-column label="城市代码" width="50" prop="airportCityId"></el-table-column>
      <el-table-column label="是否启用" width="50" prop="isUsed">
        <template slot-scope="scope">
          <span>{{scope.row.isUsed=='1'?'启用':'停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="大巴说明" prop="airportBusTimetable"></el-table-column>
      <el-table-column label="机场说明" prop="airportDesc"></el-table-column>
      <el-table-column label="启用时间" width="85"  prop="startTime"></el-table-column>
      <el-table-column label="计划终止时间" width="100" prop="endTime"></el-table-column>
      <el-table-column label="机场简称" width="50" prop="airnamesort"></el-table-column>
      <!-- <el-table-column
        label="城市ID"
        width="80"
        prop="cityId"
      ></el-table-column> -->
      <el-table-column label="操作" width="150" >
        <template slot-scope="scope">
          <el-button type="primary" @click="modifyairPort(scope.row)" size="mini">修改</el-button>
          <el-popconfirm title="确定删除该条机场信息吗？" @confirm="deleteairPortList">
            <el-button slot="reference" type="primary" @click="deleteairPort(scope.row)" size="mini">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <!-- 新增 -->
    <el-dialog title="机场" :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%">
      <el-form :model="airportadd" ref="ruleForm" :rules="rules" size="mini" class="airportaddcss">
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="机场代码" prop="airportId" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportId"></el-input>
          </el-form-item>
          <el-form-item label="中文名称" prop="airportName" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportName"></el-input>
          </el-form-item>
          <el-form-item label="英文名称" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportEname"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="城市代码" prop="airportCityId" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportCityId"></el-input>
          </el-form-item>
          <el-form-item label="城市名称" prop="airportCityName" style="display: flex; margin: 0 20px 0 0">
            <el-select clearable v-model="airportadd.airportCityName" filterable placeholder="请选择">
              <el-option v-for="(item,index) in querySearch" :key="index" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市全拼" prop="airportCityPinyin" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportCityPinyin"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="城市简拼" prop="airportCityJpinyin" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportCityJpinyin"></el-input>
          </el-form-item>
        
          <el-form-item label="机场简称" prop="airnamesort" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airnamesort"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="机场名称简拼" prop="airportNameJianpin" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.airportNameJianpin"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="起始时间" prop="startTime" style="display: flex; margin: 0 20px 0 0">
            <el-date-picker v-model="airportadd.startTime" size="mini" style="width: 140px" placeholder="选择日期"
              :value-format="format">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="终止时间" prop="endTime" style="display: flex; margin: 0 20px 0 0">
            <el-date-picker v-model="airportadd.endTime" size="mini" style="width: 140px" placeholder="选择日期"
              :value-format="format">
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item
            label="城市id"
            style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.cityId"></el-input>
          </el-form-item> -->
          <el-form-item style="display: flex; margin: 0 20px 0 0">
            <el-checkbox v-model="checked" @change="changeisUsed">启用城市代码</el-checkbox>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0"></div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="百度经纬度" prop="name" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.coordinates"></el-input>
            <div style="display: flex" @click="get_jecoco_report">
              <div>坐标拾取地址</div>
              <div>http://api.map.baidu.com/lbsapi/getpoint/index.html</div>
            </div>
          </el-form-item>
          <el-form-item label="高德经纬度" prop="name" style="display: flex; margin: 0 20px 0 0">
            <el-input v-model="airportadd.coordinatesgd"></el-input>
            <div style="display: flex" @click="coordinatesgdList">
              <div>坐标拾取地址</div>
              <div>http://lbs.amap.com/console/show/picker</div>
            </div>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="大巴说明" style="display: flex; margin: 0 20px 0 0">
            <el-input style="width: 600px" v-model="airportadd.airportBusTimetable" type="textarea" :rows="2">
            </el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="机场介绍" style="display: flex; margin: 0 20px 0 0">
            <el-input style="width: 600px" v-model="airportadd.airportDesc" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 15px 0">
          <el-form-item label="上传机场图片" style="display: flex; margin: 0 20px 0 0">
            <el-upload ref="upload" :limit="1" :show-file-list="false" :data="multipartFile" :action="imgHttpAllUrl" :headers="header" list-type="picture-card"
              :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <img v-if="airportadd.picturename" :src="airportadd.picturename" class="avatar" style="width:100%">
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
        <el-form-item style="display: flex; margin: 0 20px 0 45%">
          <el-button type="primary" @click="determineairPort('ruleForm')">确 定</el-button>
          <el-button @click="resetForm()">重置</el-button>
          <!-- @click="cancelairPort" -->
          <el-button >取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 图片上传相关参数
        // 开始
        imgHttpAllUrl: this.$imgHttpAllUrl,
        multipartFile: { type: "flightMachineType" },
        header: {
          token: document.cookie.split("; ")[0].split("=")[1],
        },
        // 结束
        url: "http://api.map.baidu.com/lbsapi/getpoint/index.html",
        urlList: "http://lbs.amap.com/console/show/picker",
        querySearch: [],
        cityList: [],
        // 时间校验
        format: "yyyy-MM-dd HH:mm:ss",
        // 新增校验
        rules: {
          airportId: [{
            required: true,
            message: "请输入机场代码",
            trigger: "blur"
          }, ],
          airportName: [{
            required: true,
            message: "请输入机场中文名称",
            trigger: "blur"
          }, ],
          airportCityId: [{
            required: true,
            message: "请输入城市代码",
            trigger: "blur"
          }, ],
          airportCityName: [{
            required: true,
            message: "请选择城市",
            trigger: "blur"
          }, ],
          airportCityPinyin: [{
            required: true,
            message: "请输入城市全拼",
            trigger: "blur"
          }, ],
          airportCityJpinyin: [{
            required: true,
            message: "请输入城市简拼",
            trigger: "blur"
          }, ],
          airnamesort: [{
            required: true,
            message: "请输入机场简称",
            trigger: "blur"
          }, ],
          startTime: [{
            required: true,
            message: "请选择开始时间",
            trigger: "blur"
          }, ],
          endTime: [{
            required: true,
            message: "请选择终止时间",
            trigger: "blur"
          }, ],
          airportNameJianpin: [{
            required: true,
            message: "请输入机场名称简拼",
            trigger: "blur"
          }, ],
        },
        // 启用城市代码
        checked: true,
        delivery: false,
        dialogVisible: false,
        //分页
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 列表数组
        auxiliary: [],
        cardCodelist: [],
        idList: "",
        // 新增机场
        airportadd: {
          coordinatesgd: "",
          airportNameJianpin: "",
          airportNameQuanpin: "",
          picturename: "",
          coordinates: "",
          orderSort: "",
          airportId: "",
          airportName: "",
          airportEname: "",
          airportCityName: "",
          airportCityEname: "",
          airportCityPinyin: "",
          airportCityJpinyin: "",
          airportCityId: "",
          isUsed: true,
          startTime: "",
          endTime: "",
          airnamesort: "",
          airportBusTimetable:"",
          airportDesc:"",

        },
        // 查询条件
        thequery: {
          airportName: "",
          airportCityName: "",
          airportId: "",
          airportCityId: "",
          endTime: "",
          startTime: ""
        },
        // 图片状态
        imagestate: [{
            value: "1",
            label: "全部",
          },
          {
            value: "2",
            label: "未添加",
          },
          {
            value: "3",
            label: "已添加",
          },
        ],
      };
    },

    methods: {
      coordinatesgdList() {
        window.open(this.urlList);
      },
      get_jecoco_report() {
        window.open(this.url);

      },
      // 图片返回数据
      handleAvatarSuccess(response) {
        this.airportadd.picturename = response.data[0]
      },
      // 城市名称及三字码
      // querySearchchange(row){
      //   console.log(row)
      //   this.airportadd.airportCityName=row.label
      //   this.airportadd.airportCityId=row.value
      // },
      // 修改
      modifyairPort(row) {
        console.log(row)
        this.airportadd = row
        this.dialogVisible = true
      },
      // 删除
      deleteairPort(row) {
        console.log(row.id);
        this.idList = row.id;
      },
      // 删除
      deleteairPortList() {
        this.getdeleteAirportById()
      },
      // 删除接口
      getdeleteAirportById() {
        this.$axios
          .getdeleteAirportById({
            id: Number(this.idList),
          })
          .then((res) => {
            if (res.code == "00000") {
              this.resetairPort();
              this.getairportList();
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          });
      },
      // uploadFile(){
      // },
      // 是否启用城市代码
      changeisUsed(row) {
        console.log(row);
        if (row === true) {
          row = '1'
        }
        if (row === false) {
          row = '0'
        }
        this.airportadd.isUsed = row;
        console.log(this.airportadd.isUsed)
      },
      // 上传图片
      //
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(file)
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 重置查询条件
      resetairPort() {
        this.thequery = {}
      },
      // 查询机场列表
      getairportList() {
        this.$axios.postairportList({
          airportName: this.thequery.airportName,
          airportCityName: this.thequery.airportCityName,
          airportId: this.thequery.airportId,
          airportCityId: this.thequery.airportCityId,
          endTime: this.thequery.endTime,
          startTime: this.thequery.startTime
        }).then((res) => {
          if (res.code == "00000") {
            this.auxiliary = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
      },
      // 修改机场
      postgetedit() {
        if (this.airportadd.airportEname == null) {
          this.airportadd.airportEname = ''
        }
        this.$axios
          .postgetedit({
            id: Number(this.airportadd.id),
            // 百度经纬度
            coordinates: this.airportadd.coordinates,
            // 高德经纬度
            coordinatesgd: this.airportadd.coordinatesgd,
            // 机场拼音简拼
            airportNameJianpin: this.airportadd.airportNameJianpin,
            // 城市名称全拼
            airportNameQuanpin: this.airportadd.airportNameQuanpin,
            // 机场图片名称
            picturename: this.airportadd.picturename,
            // 排序
            orderSort: Number(this.airportadd.orderSort),
            // 机场代码
            airportId: this.airportadd.airportId,
            // 机场名称
            airportName: this.airportadd.airportNamem,
            // 机场英文名称
            airportEname: this.airportadd.airportEname,
            // 城市名称
            airportCityName: this.airportadd.airportCityName,
            // 城市英文名称
            airportCityEname: this.airportadd.airportCityEname,
            // 城市全拼
            airportCityPinyin: this.airportadd.airportCityPinyin,
            // 城市简称
            airportCityJpinyin: this.airportadd.airportCityJpinyin,
            // 城市编号
            airportCityId: this.airportadd.airportCityId,
            // 是否使用
            isUsed: this.airportadd.isUsed,
            // 机场启用时间
            startTime: this.airportadd.startTime,
            // 机场终止时间
            endTime: this.airportadd.endTime,
            // 机场简称
            airnamesort: this.airportadd.airnamesort,

          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
              this.airportadd = ""
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.airportadd = {}
              this.dialogVisible = false
            } else {
              this.$message({
                message: '修改失败，请核对信息后重试',
                type: 'warning'
              });
            }
          });
      },
      // 新增机场
      getairportadd() {
        if(this.airportadd.isUsed==''){
          this.airportadd.isUsed='1'
        }
        this.$axios
          .getairportadd({
            // 百度经纬度
            coordinates: this.airportadd.coordinates,
            // 高德经纬度
            coordinatesgd: this.airportadd.coordinatesgd,
            // 机场拼音简拼
            airportNameJianpin: this.airportadd.airportNameJianpin,
            // 城市名称全拼
            airportNameQuanpin: this.airportadd.airportNameQuanpin,
            // 机场图片名称
            picturename: this.airportadd.picturename,
            // 排序
            orderSort: Number(this.airportadd.orderSort),
            // 机场代码
            airportId: this.airportadd.airportId,
            // 机场名称
            airportName: this.airportadd.airportName,
            // 机场英文名称
            airportEname: this.airportadd.airportEname,
            // 城市名称
            airportCityName: this.airportadd.airportCityName,
            // 城市英文名称
            airportCityEname: this.airportadd.airportCityEname,
            // 城市全拼
            airportCityPinyin: this.airportadd.airportCityPinyin,
            // 城市简称
            airportCityJpinyin: this.airportadd.airportCityJpinyin,
            // 城市编号
            airportCityId: this.airportadd.airportCityId,
            // 是否使用
            isUsed: String(this.airportadd.isUsed),
            // 机场启用时间
            startTime: this.airportadd.startTime,
            // 机场终止时间
            endTime: this.airportadd.endTime,
            // 机场简称
            airnamesort: this.airportadd.airnamesort,
            // 城市id
            cityId: this.airportadd.cityId,
            // 机场大巴说明
            airportBusTimetable:this.airportadd.airportBusTimetable,
            // 机场备注说明
            airportDesc:this.airportadd.airportDesc,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.dialogVisible = false
              this.airportadd.airportBusTimetable = ''
              this.airportadd.airportDesc = '',
              this.airportadd.airportName = '',
              this.airportadd.airportId = '',
              this.airportadd.id = null,

               // 百度经纬度
              this.airportadd.coordinates = "",
              // 高德经纬度
              this.airportadd.coordinatesgd = "",
              // 机场拼音简拼
              this.airportadd.airportNameJianpin = "",
              // 城市名称全拼
              this.airportadd.airportNameQuanpin = "",
              // 机场图片名称
              this.airportadd.picturename = "",
              // 排序
              this.airportadd.orderSort = null,
              // 机场代码
              this.airportadd.airportId = "",
              // 机场名称
              this.airportadd.airportNamem = "",
              // 机场英文名称
              this.airportadd.airportEname = "",
              // 城市名称
              this.airportadd.airportCityName = "",
              // 城市英文名称
              this.airportadd.airportCityEname = "",
              // 城市全拼
              this.airportadd.airportCityPinyin = "",
              // 城市简称
              this.airportadd.airportCityJpinyin = "",
              // 城市编号
              this.airportadd.airportCityId = "",
              // 是否使用
              this.airportadd.isUsed = "",
              // 机场启用时间
              this.airportadd.startTime = "",
              // 机场终止时间
              this.airportadd.endTime = "",
              // 机场简称
              this.airportadd.airnamesort = "",
              this.searchairPort()
            } else {
              this.$message({
                message: '新增失败，请核对信息后重试',
                type: 'warning'
              });
            }
          });
      },

     
      // 新增保存按钮
      determineairPort(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.airportadd.id == null) {
              this.getairportadd();
            } else {
              this.postgetedit()
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        this.$refs.upload.clearFiles();
        console.log('要清空了')
      },
      // 城市名称
      getselectCityList() {
        this.$axios.getqueryCityList({

        }).then((res) => {
          console.log(res)
          if (res.code == '00000') {
            let list = JSON.parse(JSON.stringify(res.data));
            this.querySearch = list.map((item) => {
              return {
                label: item.airportCityName
              };
            });
            console.log(this.querySearch);
          }
        })
      },
      // 重置按钮
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.airportadd = []
      },
      // 新增按钮
      newairPort() {
        this.airportadd.airportBusTimetable = ''
        this.airportadd.airportDesc = '',
          this.airportadd.airportName = '',
          this.airportadd.airportId = '',
          this.airportadd.id = null,

          // 百度经纬度
          this.airportadd.coordinates = "",
          // 高德经纬度
          this.airportadd.coordinatesgd = "",
          // 机场拼音简拼
          this.airportadd.airportNameJianpin = "",
          // 城市名称全拼
          this.airportadd.airportNameQuanpin = "",
          // 机场图片名称
          this.airportadd.picturename = "",
          // 排序
          this.airportadd.orderSort = null,
          // 机场代码
          this.airportadd.airportId = "",
          // 机场名称
          this.airportadd.airportNamem = "",
          // 机场英文名称
          this.airportadd.airportEname = "",
          // 城市名称
          this.airportadd.airportCityName = "",
          // 城市英文名称
          this.airportadd.airportCityEname = "",
          // 城市全拼
          this.airportadd.airportCityPinyin = "",
          // 城市简称
          this.airportadd.airportCityJpinyin = "",
          // 城市编号
          this.airportadd.airportCityId = "",
          // 是否使用
          this.airportadd.isUsed = "",
          // 机场启用时间
          this.airportadd.startTime = "",
          // 机场终止时间
          this.airportadd.endTime = "",
          // 机场简称
          this.airportadd.airnamesort = "",
          this.dialogVisible = true;
        this.searchairPort()
      },
      // 搜索
      searchairPort() {
           localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getairportList();
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getairportList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getairportList();
        // orders = res.data;
      },
      search() {
        localStorage.setItem("pageNum", 1);
        localStorage.setItem("pageSize", 10);
        this.getairportList();
      },
        cancelEdit(){
        this.dialogVisible = false 
        this.search()
      },
     
    },

    mounted() {
      
      // 查询机场列表
      this.search();
      // 城市列表
      this.getselectCityList();
    },
  };
</script>
<style scoped>
  el-table-column {
    background-color: #f2f2f2;
  }

  .airPort {
    margin: 20px;
  }

  .airportaddcss {
    margin-left: 50px;
  }
</style>